<%= include ic/admin-header.html %>

<div class="am-cf admin-main">
  <%= include ic/admin-sidebar.html %>

  <!-- content start -->
  <div class="admin-content">

    <div class="am-cf am-padding">
      <div class="am-fl am-cf" style="width:50%;"><strong class="am-text-primary am-text-lg">首页栏目</strong> / <small>Home Catagory</small></div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-4">

      </div>
      <div class="am-u-sm-12 am-u-md-offset-5 am-u-md-3">
        <div class="am-btn-toolbar">
          <div class="am-btn-group am-btn-group-xs">
            <button class="am-btn am-btn-default btn-saveEdit" type="button" onclick="save()">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="am-g">
      <div class="am-u-sm-12" id="bannerList">

      <div id="lefttop" val="<% if(catagory.lefttop){ %><%= catagory.lefttop.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.lefttop){ %><%= catagory.lefttop.imgId %><% } %>"/></span>
        <span class="am-fl"><b>左上栏</b>(600×600px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.lefttop){ %><%= catagory.lefttop.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="lefttop-file">
          </div>
        </span>
      </div>
      <div id="righttop" val="<% if(catagory.righttop){ %><%= catagory.righttop.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.righttop){ %><%= catagory.righttop.imgId %><% } %>"/></span>
        <span class="am-fl"><b>右上栏</b>(400×600px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.righttop){ %><%= catagory.righttop.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="righttop-file">
          </div>
        </span>
      </div>
      <div id="leftbottom" val="<% if(catagory.leftbottom){ %><%= catagory.leftbottom.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.leftbottom){ %><%= catagory.leftbottom.imgId %><% } %>"/></span>
        <span class="am-fl"><b>左下栏</b>(400×400px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.leftbottom){ %><%= catagory.leftbottom.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="leftbottom-file">
          </div>
        </span>
      </div>
      <div id="rightbottom" val="<% if(catagory.rightbottom){ %><%= catagory.rightbottom.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.rightbottom){ %><%= catagory.rightbottom.imgId %><% } %>"/></span>
        <span class="am-fl"><b>右下栏</b>(600×400px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.rightbottom){ %><%= catagory.rightbottom.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="rightbottom-file">
          </div>
        </span>
      </div>
      <div id="bottom" val="<% if(catagory.bottom){ %><%= catagory.bottom.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.bottom){ %><%= catagory.bottom.imgId %><% } %>"/></span>
        <span class="am-fl"><b>底栏</b>(1024×360px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.bottom){ %><%= catagory.bottom.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="bottom-file">
          </div>
        </span>
      </div>
      <div id="dp1" val="<% if(catagory.dp1){ %><%= catagory.dp1.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.dp1){ %><%= catagory.dp1.imgId %><% } %>"/></span>
        <span class="am-fl"><b>首页搭配推荐-1</b>(190×435px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.dp1){ %><%= catagory.dp1.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="dp1-file">
          </div>
        </span>
      </div>
      <div id="dp2" val="<% if(catagory.dp1){ %><%= catagory.dp2.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.dp2){ %><%= catagory.dp2.imgId %><% } %>"/></span>
        <span class="am-fl"><b>首页搭配推荐-2</b>(190×435px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.dp2){ %><%= catagory.dp2.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="dp2-file">
          </div>
        </span>
      </div>
      <div id="dp3" val="<% if(catagory.dp3){ %><%= catagory.dp3.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.dp3){ %><%= catagory.dp3.imgId %><% } %>"/></span>
        <span class="am-fl"><b>首页搭配推荐-3</b>(190×435px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.dp3){ %><%= catagory.dp3.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="dp3-file">
          </div>
        </span>
      </div>
      <div id="dp4" val="<% if(catagory.dp4){ %><%= catagory.dp4.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.dp4){ %><%= catagory.dp4.imgId %><% } %>"/></span>
        <span class="am-fl"><b>首页搭配推荐-4</b>(190×435px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.dp4){ %><%= catagory.dp4.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="dp4-file">
          </div>
        </span>
      </div>
      <div id="dp5" val="<% if(catagory.dp5){ %><%= catagory.dp5.imgId %><% } %>" class="banner am-cf am-u-sm-12">
        <span class="am-fl"><img height="80px" src="/p?id=<% if(catagory.dp5){ %><%= catagory.dp5.imgId %><% } %>"/></span>
        <span class="am-fl"><b>首页搭配推荐-5</b>(190×435px)<br/>链接地址:<br/><input type="text" class="url" value="<% if(catagory.dp5){ %><%= catagory.dp5.url %><% } %>" ></span>
        <span class="am-fr">
          <div class="am-input-group am-form-file">
            <div>
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-cloud-upload"></i> 上传图片</button>
            </div>
            <input type="file" id="dp5-file">
          </div>
        </span>
      </div>
      <div class="am-u-sm-12 last"></div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<style>
#bannerList{padding-bottom:20px;}
.banner{padding:3px;border:1px solid #999;margin:5px 5px 0 0;background:#eee;color:#333;float:left;}
.banner img{margin-right:10px;}
.banner i{padding:2px 8px;}
.banner .url{width:280px;background:none;border:none;border-bottom:1px solid #111;}
.btnClose{color:#a00;}
</style>
<%= include ic/admin-footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
$(function() {
	$("#collapse-setting").addClass("am-in");
	$("#lefttop-file").on("change",function(e){
		uploadImage2(this.files[0],"lefttop");
	});
  $("#righttop-file").on("change",function(e){
		uploadImage2(this.files[0],"righttop");
	});
  $("#leftbottom-file").on("change",function(e){
		uploadImage2(this.files[0],"leftbottom");
	});
  $("#rightbottom-file").on("change",function(e){
		uploadImage2(this.files[0],"rightbottom");
	});
  $("#bottom-file").on("change",function(e){
		uploadImage2(this.files[0],"bottom");
	});
  $("#dp1-file").on("change",function(e){
		uploadImage2(this.files[0],"dp1");
	});
  $("#dp2-file").on("change",function(e){
		uploadImage2(this.files[0],"dp2");
	});
  $("#dp3-file").on("change",function(e){
		uploadImage2(this.files[0],"dp3");
	});
  $("#dp4-file").on("change",function(e){
		uploadImage2(this.files[0],"dp4");
	});
  $("#dp5-file").on("change",function(e){
		uploadImage2(this.files[0],"dp5");
	});
});

function delTag(obj){
  //console.log($(obj).parent().parent(".banner").html());
  $(obj).parent().parent(".banner").remove();
}

function upTag(obj){
  var o=$(obj).parent().parent(".banner");
  $(o).insertBefore($(o).prev());
  //console.log($(obj).parent().parent(".banner").html());
  //$(obj).parent().parent(".banner").remove();
}

function save(){
  $loading.modal('open');
  var bannerArr={};
  bannerArr.lefttop     = {};
  bannerArr.righttop    = {};
  bannerArr.leftbottom  = {};
  bannerArr.rightbottom = {};
  bannerArr.bottom      = {};
  bannerArr.dp1         = {};
  bannerArr.dp2         = {};
  bannerArr.dp3         = {};
  bannerArr.dp4         = {};
  bannerArr.dp5         = {};
  bannerArr.lefttop.imgId     = $("#lefttop").attr("val");
  bannerArr.lefttop.url       = $.trim($("#lefttop").find(".url").val());
  bannerArr.righttop.imgId    = $("#righttop").attr("val");
  bannerArr.righttop.url      = $.trim($("#righttop").find(".url").val());
  bannerArr.leftbottom.imgId  = $("#leftbottom").attr("val");
  bannerArr.leftbottom.url    = $.trim($("#leftbottom").find(".url").val());
  bannerArr.rightbottom.imgId = $("#rightbottom").attr("val");
  bannerArr.rightbottom.url   = $.trim($("#rightbottom").find(".url").val());
  bannerArr.bottom.imgId      = $("#bottom").attr("val");
  bannerArr.bottom.url        = $.trim($("#bottom").find(".url").val());
  bannerArr.dp1.imgId      = $("#dp1").attr("val");
  bannerArr.dp1.url        = $.trim($("#dp1").find(".url").val());
  bannerArr.dp2.imgId      = $("#dp2").attr("val");
  bannerArr.dp2.url        = $.trim($("#dp2").find(".url").val());
  bannerArr.dp4.imgId      = $("#dp4").attr("val");
  bannerArr.dp4.url        = $.trim($("#dp4").find(".url").val());
  bannerArr.dp3.imgId      = $("#dp3").attr("val");
  bannerArr.dp3.url        = $.trim($("#dp3").find(".url").val());
  bannerArr.dp5.imgId      = $("#dp5").attr("val");
  bannerArr.dp5.url        = $.trim($("#dp5").find(".url").val());

  //console.log(bannerArr);
  $.post("./saveCatagory", {
    "ajax"			: true,
    "tagArr"		: JSON.stringify(bannerArr)
  },function(data){
    $loading.modal('close');
    //$.AMUI.progress.done();
    $(".btn-saveEdit").removeClass("am-disabled");
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      mAlert({
        title:"提示",
        text:"保存成功！",
        onConfirm:function(e) {
          location.reload();
        }
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}

function uploadImage2(file,type) {
  console.log(type);
	$loading.modal('open');
	var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e){}
	var fd = new FormData();
	fd.append("uploadImg", file);
	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener("progress", function(evt){
		if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded/ evt.total);
      //progress.set(percentComplete);
    }
	}, false);
	xhr.addEventListener("load", function(evt){
		$loading.modal('close');
		var img=eval('('+evt.target.responseText+')');
		console.log(evt.target.responseText);
		if(img.success){
      $("#"+type).attr("val",img.id);
      $("#"+type+" img").attr("src","/p?id="+img.id);
		}else{
			mAlert({title:"错误",text:img.msg});
		}
	}, false);
	xhr.addEventListener("error", function(evt){
		$loading.modal('close');
		mAlert({title:"错误",text:"上传失败！"});
	}, false);
	xhr.addEventListener("abort", function(evt){
		$loading.modal('close');
	}, false);
	xhr.open("POST", "/admin/uploadImg");
	xhr.send(fd);
}
</script>
